<template>
	<view class="videoList">
		<view class="swiper-box">
			<swiper 
			class="swiper"  
			:vertical="true" circular  
			@change="change" 
			@touchstart="touchStart"
			@touchend="touchEnd"
			>
				<swiper-item v-for="(item,index) of videos" :key="item.id" >
					<view class="swiper-item" style="color: #000000 ;">
						<video-player  
						@changeClick="changeClick"  
						ref="player" 
						:video="item" 
						:index="index" >
						</video-player>
					</view>
					<view class="left-box">
						<list-left :item="item" ></list-left>
					</view>
					<view class="right-box">
						<list-right  @open="openComment" :item="item"  ref="right" ></list-right>
					</view>
				</swiper-item>
			
			</swiper>
		</view>
		<view  v-show="show"  class="comment-box">
			<comment @close="close" ></comment>
		</view>
	</view>
</template>

<script>
	import videoPlayer from './videoPlayer.vue'
	import listLeft from './listLeft.vue'
	import listRight from './listRight.vue'
	import comment from './comment.vue'
	// 定时器
	var time=null
	export default {
		props:['list'],
		components:{
			videoPlayer,
			listLeft,
			listRight,
			comment
			
		},
		name:"videoList",
		data() {
			return {
				videos:[],
				pageStartY:0,
				pageEndY:0,
				page:0,
				show:false
			};
		},
		watch:{
			list(){
				this.videos=this.list
			}
		},
		methods:{
			changeClick(){
				// console.log("监听双击事件")
				// 双击视频点赞,调用子组件listRight里的change方法
				//ref="right"
				this.$refs.right[0].change()
			},
			change(res){
				// console.log(res.detail.current)
				//获取当前播放页面
				this.page=res.detail.current
				
				//移除定时器
				clearTimeout(time)
				time=setTimeout(()=>{
					// 判断视频是上滑还是下滑（Y轴的纵向距离）
					if(this.pageStartY>this.pageEndY){
						// console.log("向上滑动")
						// console.log(this.page)
						// 向上滑动播放当前视频
						this.$refs.player[this.page].player()
						// 暂停上一个视频
						this.$refs.player[this.page-1].pause()
						this.pageStartY=0
						this.pageEndY=0
					}else{
						// console.log("向下滑动")
						// console.log(this.page)
						// 向下滑动播放当前视频
						this.$refs.player[this.page].player()
						// 暂停刚看过的视频
						this.$refs.player[this.page+1].pause()
						this.pageStartY=0
						this.pageEndY=0
					}
				},1)
			},
			touchStart(res){
				// console.log(res)
				this.pageStartY=res.changedTouches[0].pageY
				// console.log(this.pageStartY)
			},
			touchEnd(res){
				// console.log(res)
				this.pageEndY=res.changedTouches[0].pageY
				// console.log(this.pageEndY)
			},
			openComment(){
				// console.log("点击评论图标，展示评论区")
				if( this.show === false ){
					this.show=true
				}
			},
			// 关闭评论
			close(){
				if( this.show === true ){
					this.show=false
				}
			}
		}
	}
</script>

<style>
	.videoList{
		height: 100%;
		width: 100%;
	}
	.swiper-box{
		height: 100%;
		width: 100%;
	}
	.swiper{
		height: 100%;
		width: 100%;
	}
	.swiper-item{
		height: 100%;
		width: 100%;
		z-index:19;
	}
	.left-box{
		z-index: 20;
		position:absolute;
		bottom: 50px;
		left: 10px;
	}
	.right-box{
		z-index: 20;
		position:absolute;
		bottom: 50px;
		right: 10px;
	}
	.comment-box{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 22;
		width: 100%;
		height: 65%;
	}

</style>